<template>
    <div class="quality-change-page">
        <!-- 标题与介绍 -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <div class="content-box">
            <!-- 输入区域 -->
            <div class="input-group">
                <div class="input-item">
                    <span>选择单位：</span>
                    <el-select v-model="selectedUnit" placeholder="请选择单位" style="width: 100%;">
                        <el-option
                                v-for="unit in units"
                                :key="unit.value"
                                :label="unit.label"
                                :value="unit.value"
                        />
                    </el-select>
                </div>
                <div class="input-item">
                    <span>输入数值：</span>
                    <el-input-number
                            v-model="inputValue"
                            :min="0"
                            :step="1"
                            style="width: 100%;"
                    />
                </div>
            </div>

            <!-- 结果表格 -->
            <el-table
                    :data="tableData"
                    border
                    size="small"
                    style="width: 100%;"
            >
                <el-table-column
                        prop="label"
                        label="单位"
                        width="160"
                        :header-cell-style="{ backgroundColor: '#f0f0f0' }"
                        :cell-style="{ backgroundColor: '#f9f9f9', fontWeight: 'bold' }"
                />
                <el-table-column
                        prop="value"
                        label="数值"
                >
                    <template #default="{ row }">
                        <el-input v-model="row.value" readonly style="width: 100%;"/>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue'
import {get, post} from '@/net/index.js'
import {ElMessage} from 'element-plus'
import ToolHeader from '@/components/ToolHeader.vue'
import {debounce} from 'lodash'

// 页面标题与简介
const title = ref('')
const subtitle = ref('')

// 支持的质量单位
const units = [
    {label: '微克 (mcg)', value: 'mcg'},
    {label: '毫克 (mg)', value: 'mg'},
    {label: '克 (g)', value: 'g'},
    {label: '千克 (kg)', value: 'kg'},
    {label: '斤 (jin)', value: 'jin'},
    {label: '磅 (lb)', value: 'lb'},
    {label: '盎司 (oz)', value: 'oz'},
    {label: '公吨 (mt)', value: 'mt'},
    {label: '吨 (t)', value: 't'}
]

// 默认选中单位和输入值
const selectedUnit = ref('g')
const inputValue = ref(55)

// 表格数据
const tableData = ref(
    units.map(unit => ({
        label: unit.label,
        value: ''
    }))
)

// 初始加载 tool 信息
const loadToolInfo = () => {
    get('/api/mathTool/getInfo?path=quality_change',
        (data) => {
            title.value = data.title || '质量换算'
            subtitle.value = data.introduction || ''
        },
        (err) => ElMessage.error('获取工具信息失败：' + err)
    )
}

// 接口请求函数（防抖版）
const fetchChangeResult = debounce(() => {
    if (!selectedUnit.value || inputValue.value == null) {
        // 输入无效时重置表格数据
        tableData.value = units.map(unit => ({
            label: unit.label,
            value: ''
        }))
        return
    }

    post('/api/mathTool/getQualityChangeResult', {
        type: selectedUnit.value,
        value: inputValue.value
    }, (res) => {
        if (Array.isArray(res)) {
            tableData.value = res.map(item => ({
                label: item.label,
                value: item.value
            }))
        } else {
            tableData.value = units.map(unit => ({
                label: unit.label,
                value: ''
            }))
            ElMessage.error('返回数据格式错误')
        }
    }, (err) => {
        ElMessage.error('换算失败：' + err)
    })
}, 500)

// watch 输入与单位
watch([selectedUnit, inputValue], fetchChangeResult)

onMounted(() => {
    loadToolInfo()
    fetchChangeResult()
})
</script>

<style scoped>
.quality-change-page {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content-box {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.input-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-item span {
    font-weight: 500;
    margin-bottom: 0.4rem;
}
</style>